<template>
  <div class="container">
    <el-row>
      <el-form ref="searchform" :model="form" size="small">
        <el-col :span="3">
          <el-form-item prop="status">
            <el-select v-model="form.status" placeholder="请选择状态" style="width: 95%" clearable>
              <el-option :label="statusItem.lable" :value="index" v-for="(statusItem, index) in statusOptions"
                :key="index"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item prop="chapter">
            <el-select clearable v-model="form.chapter" placeholder="请选择章节" style="width: 95%">
              <el-option :label="chapterItem.title" :value="chapterItem.id"
                v-for="(chapterItem, index) in chapterOptions" :key="index"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item prop="type">
            <el-select clearable v-model="form.type" placeholder="请选择类型" style="width: 95%">
              <el-option :label="typeItem.lable" :value="typeItem.id" v-for="(typeItem, index) in typeOptions"
                :key="index"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item prop="is_charge">
            <el-select clearable v-model="form.is_charge" placeholder="请选择级别" style="width: 95%">
              <el-option :label="levelItem.lable" :value="levelItem.id" v-for="(levelItem, index) in levelOptions"
                :key="index"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item prop="keyWord">
            <el-input placeholder="请输入章节/题干" clearable v-model="form.keyWord">
            </el-input>
          </el-form-item>
        </el-col>
        <div class="rightbtn">
          <el-button type="primary" icon="el-icon-search" size="small" @click="searchlist" class="marginL">查询
          </el-button>
          <el-button icon="el-icon-refresh-left" size="small" @click="resetform">重置</el-button>
        </div>
      </el-form>
    </el-row>
    <el-row>
      <el-button type="primary" size="small" @click="addItem" v-if="checkPermission(['subFourCreate'])">添加</el-button>
    </el-row>
    <el-row>
      <el-table :data="tableData" border style="width: 100%; margin-top: 20px" size="small">
        <el-table-column prop="section_id" label="题序" show-overflow-tooltip></el-table-column>
        <el-table-column prop="chapter" label="章节" show-overflow-tooltip></el-table-column>
        <el-table-column prop="content" label="题干" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="head_img" label="图片" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-image class='table-head-img' style="width: 50px; height: 50px" :src="scope.row.head_img"
              :preview-src-list="[scope.row.head_img]" v-if='scope.row.head_img && scope.row.head_type == "image"'>
            </el-image>
            <div class="list-video" @click="playVideo($event)" v-else-if='scope.row.head_img && scope.row.head_type == "video"'>
              <video :src="scope.row.head_img"></video>
              <span class="play-btn">
                <svg-icon icon-class="video-play" />
                <svg-icon icon-class="video-pause" />
              </span>
            </div>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column prop="type" label="类型" show-overflow-tooltip>
          <template slot-scope="scope">
            <svg-icon :icon-class="scope.row.type.icon" style="margin-right:2px" />
            <span :style="{color: scope.row.type.color}">{{scope.row.type.title}}</span>
          </template>
        </el-table-column>
             <el-table-column prop="knowledge_point" label="知识点" show-overflow-tooltip>  </el-table-column>
          <el-table-column prop="skill_point" label="技巧点" show-overflow-tooltip>  </el-table-column>
        <el-table-column prop="is_charge" label="级别" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-switch class="switch" v-model="scope.row.is_charge" @change="changestatus(scope.row)" :active-value="1"
              :inactive-value="0" active-text="VIP" inactive-text="普通" v-if="checkPermission(['subFourIsCharge'])">
            </el-switch>
          </template>
        </el-table-column>
    
        <el-table-column prop="status" label="状态" show-overflow-tooltip></el-table-column>
        <el-table-column prop="remark" label="备注" show-overflow-tooltip></el-table-column>
        <el-table-column prop="create_time" label="创建时间" show-overflow-tooltip></el-table-column>
        <el-table-column prop="update_time" label="修改时间" show-overflow-tooltip></el-table-column>
        <el-table-column prop="date" label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="editItem(scope.row)" v-if="checkPermission(['subFourUpdate'])">编辑</el-button>
            <el-button type="text" @click="deleteTableItem(scope.row)" v-if="checkPermission(['subFourDelete'])">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row>
        <el-col :span="24" class="pagination">
          <el-pagination @size-change="handleSizeChange" :current-page.sync="page" @current-change="handleCurrentChange" :page-sizes="[10, 20]"
            :page-size="10" background layout="total, sizes, prev, pager, next" :total="pagination.total">
          </el-pagination>
        </el-col>
      </el-row>
    </el-row>
    <!-- 弹框 -->
    <subdialog :isshowDialog="isshowDialog" :course='course' :dialogTitle="dialogTitle" :formType="formtype"
      :chapterOptions="chapterOptions"  :knowledgePoint='knowledgePoint' :skillPoint='skillPoint'  @confirm="confirm" @closedialog="closedialog" :dialogdata="dialogdata">
    </subdialog>
  </div>
</template>

<script type="text/javascript">
  import checkPermission from '@/utils/permission' // 权限判断函数
  import {
    question,
    questionDelete,
    updateischarge,
    questionRead,
  } from "@/api/questionBank";
  import subdialog from "../components/dialog";
  export default {
    data() {
      return {
        course: 4, //科目四
        isshowDialog: false,
        dialogTitle: "新增题库",
        formtype: 0,
        page: 1,
        rows: 10,
        form: {
          status: null,
          chapter: null,
          type: "",
          is_charge: null,
          keyWord: null,
        },
        statusOptions: [{
            lable: "未处理"
          },
          {
            lable: "已完成同步"
          },
          {
            lable: "图片有水印"
          },
          {
            lable: "图片不存在"
          },
          {
            lable: "图片不匹配"
          },
          {
            lable: "其他"
          },
        ],
        typeOptions: [{
            lable: "判断",
            id: 0
          },
          {
            lable: "单选",
            id: 1
          },
          {
            lable: "多选",
            id: 2
          },
        ],
        levelOptions: [{
            lable: "普通",
            id: 0
          },
          {
            lable: "收费",
            id: 1
          },
        ],
        tableData: [],
        chapterOptions: [],
          knowledgePoint: [],
        skillPoint: [],
        pagination: {},
        dialogdata: null,
      };
    },
    components: {
      subdialog,
    },
    created() {
      this.getData();
    },
    methods: {
      checkPermission,
      handleSizeChange(val) {
        this.rows = val;
        this.getData();
      },
      handleCurrentChange(val) {
        this.page = val;
        this.getData();
      },
      searchlist() {
         this.page= 1,
        this.getData();
      },
      resetform() {
        this.$refs["searchform"].resetFields();
        this.getData();
      },
      // 播放video
      async playVideo(event) {
        var target = event.currentTarget;
        var videoArr = document.getElementsByTagName('video');
        // 暂停其他在播放视频
        videoArr.forEach(function (item,index) {
           // 暂停页面上所有video
           item.pause();
           // 清除所有video 父级的active class名
           item.parentNode.classList.remove('active');
           // 初始化其他video 播放状态
           if(item.getAttribute('src') != target.firstChild.getAttribute('src') && item.parentNode.getAttribute('status') == 'play'){
              item.parentNode.setAttribute('status','pause');
           }
        })

        // 检查当前video 是否正在播放
        if(target.getAttribute('status') == 'play'){
            // 暂停video
            target.firstChild.pause();
            // 移除播放样式
            target.classList.remove('active');
            // 设置video 播放状态为 pause
            target.setAttribute('status','pause');
        }else{
            // 播放video
            target.firstChild.play();
            // 添加播放样式
            target.classList.add('active');
            // 设置video 播放状态为 play
            target.setAttribute('status','play');
        }

        // 视频播放结束
        target.firstChild.addEventListener('ended', function () {
            // 移除播放样式
            target.classList.remove('active');
            target.setAttribute('status','pause');
        }, false);

      },
      //详情
      async getquestionRead(id) {
        let data = await questionRead({
          id: id,
          _request:this.course,
        });
        this.dialogdata = data.data;
      },
      //切换类型
      async changestatus(val) {
        let isCharge = val.is_charge == 0 ? 1 : 0;
        let params = {
          id: val.id,
          isCharge: isCharge,
          _request:this.course,
        };
        let data = await updateischarge(params);
        if (data.code == "0000") {
          this.$message({
            type: "success",
            message: data.msg,
          });
          this.getData();
        }
      },
      //新增
      addItem() {
        this.isshowDialog = true;
        this.dialogTitle = "新增题库";
        this.formtype = 0;
      },
      //编辑
      editItem(val) {
   
        this.isshowDialog = true;
        this.dialogTitle = "编辑题库";
        this.formtype = 1;
             this.getquestionRead(val.id);
      },
      async deleteTableItem(val) {
        let data = await questionDelete({
          id: val.id,
          _request:this.course,
        });
        if (data.code == "0000") {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.getData();
        }
      },
      //提交成功
      confirm() {
        this.isshowDialog = false;
        this.getData();
      },
      closedialog() {
        this.isshowDialog = false;
      },
      //获取列表
      async getData() {
        let params = {
          course: this.course,
          page: this.page,
          rows: this.rows,
          _request:this.course,
        };
        if (this.form.status) {
          params.status = this.form.status;
        }
        if (this.form.chapter) {
          params.chapter = this.form.chapter;
        }
        if (this.form.type !== "") {
          params.type = this.form.type;
        }
        if (this.form.is_charge) {
          params.is_charge = this.form.is_charge;
        }
        if (this.form.keyWord) {
          params.keyword = this.form.keyWord;
        }

        let data = await question(params);
        let datainfo = data.data;
        this.chapterOptions = datainfo.chapter[this.courseparams];
        this.knowledgePoint = datainfo.knowledgePoint;
        this.skillPoint = datainfo.skillPoint;
        this.tableData = datainfo.list;
        this.pagination = datainfo.page;
      },
    },
    mounted() {},
  };
</script>

<style lang="scss" scoped>
</style>
